import React, { Component } from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Button, Row, Col } from 'antd';
import { WeaLocaleProvider, WeaTools } from 'ecCom';
import { clone } from '../../util';
import ResContent from './ResContent';

const Base64 = WeaTools.Base64;
const getLabel = WeaLocaleProvider.getLabel;

@inject('votingVotingList')
@observer
export default class PrintPreview extends Component {
  constructor(props) {
    super(props);
    this.prefixCls = 'vote-result-print-preview';
    this.state = {
      printing: false,
      name: '',
    };
  }

  componentDidMount() {
    const { votingVotingList, location: { query } } = this.props;
    const { getPrintPreview, setStoreState } = votingVotingList;
    const lsName = localStorage.getItem('surveyTitle');
    const name = lsName ? Base64.decode(lsName) : '';
    this.setStyle(); // 修改影响打印功能的全局样式
    this.setState({ name }); // 结果名称

    let radioParams = clone(query);
    delete radioParams.name;
    delete radioParams.id;
    setStoreState({ status: { ...status, votingDialogId: query.id } });
    getPrintPreview(query.id, radioParams, () => {
      // this.contentRef && this.contentRef.getDetailList();
    });
  }

  setStyle = () => {
    $('body').css('overflow', 'visible');
    $('html').css('overflow', 'auto');
    $('#container').css('overflow', 'visible');
  }

  render() {
    const { votingVotingList, votingVotingList: { status, printDetailMap } } = this.props;
    const { printing, name } = this.state;
    const { dialogCondition } = toJS(status);
    return (
      <div className={this.prefixCls}>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9c7ky9`} align="middle" className={`${this.prefixCls}-header`} style={{ display: !printing ? 'block' : 'none' }}>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@tszxlp`} span={20} className={`${this.prefixCls}-header-title`}>
            <div className={`${this.prefixCls}-header-icon wea-browser-single-icon-circle wea-dialog-icon`}>
              <i className="icon-coms-investigate" />
            </div>
            <span>{`${getLabel(20042, '调查结果')}: ${name}`}</span>
          </Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@u8aq92`} span={4} className={`${this.prefixCls}-header-ops`}>
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@m6psmj`} type="primary" onClick={() => this.resVotePrint()}>{getLabel('257', '打印')}</Button>
          </Col>
        </Row>
        <div id="maskContainer" className={`${this.prefixCls}-content`}>
          <div className={`${this.prefixCls}-content-mask`} />
          <ResContent ecId={`${this && this.props && this.props.ecId || ''}_ResContent@45p12x`}
            ref={ref => this.contentRef = ref}
            store={votingVotingList}
            status={toJS(status)}
            printDetailMap={toJS(printDetailMap)}
            statistics={dialogCondition}
            isPrintPreview
          />
        </div>
      </div>
    );
  }

  // 打印
  resVotePrint = () => {
    this.setState({ printing: true }, () => {
      window.print();
      this.setState({ printing: false });
    });
  }
}
